<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>嵌套坐标系统</title>
</head>
<body>
    <svg width="200px" height="200px" viewBox="0 0 200 200" style="border:1px solid green">
        <circle cx="25" cy="25" r="25" style="stroke:black;fill:none;" />
    </svg>

    <svg width="200" height="200" viewBox="0 0 200 200" style="border:1px solid green">
        <circle cx="25" cy="25" r="25" style="stroke:black;fill:none" />
        <rect x="100" y="5" width="30" height="80" style="stroke:blue;fill:none;" />
    </svg>

    <svg width="200px" height="200px" viewBox="0 0 200 200" style="border:1px solid green">
        <circle cx="25" cy="25" r="25" style="stroke:black;fill:none;" />
        <rect x="100" y="5" width="30" height="80" style="stroke:blue;fill:none;" />

        <svg x="100px" y="5px" width="30px" height="80px" viewBox="0 0 50 50" preserveAspectRatio="xMaxYMax meet"></svg>
    </svg>

    <svg width="200px" height="200px" viewBox="0 0 200 200" style="border:1px solid red">
        <circle cx="25" cy="25" r="25" style="stroke:black;fill:none;" />
        <rect x="100" y="5" width="30" height="80" style="stroke:blue;fill:none;" />
        <svg x="100px" y="5px" width="30px" height="80px" viewBox="0 0 50 50" preserveAspectRatio="xMaxYmax meet">
            <circle cx="25" cy="25" r="25" style="stroke:black;fill:none;" />
        </svg>
    </svg>
</body>
</html>